<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="author" content="viggo" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <title>MINI 패널티킥</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />

    <link rel="stylesheet" href="./css/common_class.css" />
    <link rel="stylesheet" href="./css/game.css" />
    <link rel="stylesheet" href="./css/layout.css" />

    <style>
      .mWheelOutter {
        transform: rotate(0deg);
      }
    </style>
  </head>

  <body>
    <div class="game_layout">
      <div class="game_layout_head">
        <div class="top_layout left">
          <!-- ranking -->
          <span class="icon rank"></span>
          <!-- point -->
          <span class="icon point"></span>
        </div>
        <!-- logo -->
        <h1 class="logo"></h1>
        <div class="top_layout right">
          <!-- infomation -->
          <span class="icon infomation"></span>
          <!-- share -->
          <span class="icon share"></span>
          <!-- sound -->
          <span class="icon sound"></span>
        </div>
      </div>
      <div class="game_layout_contents">
        <!-- sidebar left -->
        <div class="sidebar left">
          <div class="sidebar_contents">
            <!-- userpick -->
            <div class="userpick">
              <!-- layout -->
              <div class="userpick_layout">
                <!-- 승 -->
                <div class="userpick_item">
                  <div class="name">
                    <div class="level">
                      <span class="num red">4</span>
                    </div>
                    <strong class="text-red">승</strong>
                  </div>
                  <div class="control">
                    <span class="c_icon purple"></span>
                    <span class="c_icon blue"></span>
                    <span class="c_icon com active"></span>
                  </div>
                  <!-- hover data -->
                  <div class="hover_data">
                    <div class="hover_data_tit">
                      <div class="name">
                        <span class="level"
                          ><img src="./images/level/1_9.png" alt=""
                        /></span>
                        <strong>신의구간</strong>
                      </div>
                    </div>
                    <div class="hover_data_contents">
                      <dl>
                        <dt>구분</dt>
                        <dd>파워볼</dd>
                      </dl>
                      <dl>
                        <dt>연승</dt>
                        <dd class="text-red">▲6연승</dd>
                      </dl>
                      <dl>
                        <dt>승률</dt>
                        <dd>
                          <span class="text-red">67승</span>/<span
                            class="text-aqua"
                            >33패(67%)</span
                          >
                        </dd>
                      </dl>
                    </div>
                  </div>
                </div>
                <!-- 패 -->
                <div class="userpick_item">
                  <div class="name">
                    <div class="level">
                      <span class="num aqua">1</span>
                    </div>
                    <strong class="text-aqua">패</strong>
                  </div>
                  <div class="control">
                    <span class="c_icon orange"></span>
                    <span class="c_icon red"></span>
                    <span class="c_icon com"></span>
                  </div>
                  <!-- hover data -->
                  <div class="hover_data">
                    <div class="hover_data_tit">
                      <div class="name">
                        <span class="level"
                          ><img src="./images/level/1_9.png" alt=""
                        /></span>
                        <strong>신의구간</strong>
                      </div>
                    </div>
                    <div class="hover_data_contents">
                      <dl>
                        <dt>구분</dt>
                        <dd>파워볼</dd>
                      </dl>
                      <dl>
                        <dt>연승</dt>
                        <dd class="text-red">▲6연승</dd>
                      </dl>
                      <dl>
                        <dt>승률</dt>
                        <dd>
                          <span class="text-red">67승</span>/<span
                            class="text-aqua"
                            >33패(67%)</span
                          >
                        </dd>
                      </dl>
                    </div>
                  </div>
                </div>
                <!-- tie -->
                <div class="userpick_item">
                  <div class="name">
                    <div class="level">
                      <span class="num aqua">1</span>
                    </div>
                    <strong class="text-aqua">패</strong>
                  </div>
                  <div class="control">
                    <span class="c_icon key"></span>
                    <span class="c_icon com"></span>
                  </div>
                  <!-- hover data -->
                  <div class="hover_data">
                    <div class="hover_data_tit">
                      <div class="name">
                        <span class="level"
                          ><img src="./images/level/1_9.png" alt=""
                        /></span>
                        <strong>신의구간</strong>
                      </div>
                    </div>
                    <div class="hover_data_contents">
                      <dl>
                        <dt>구분</dt>
                        <dd>파워볼</dd>
                      </dl>
                      <dl>
                        <dt>연승</dt>
                        <dd class="text-red">▲6연승</dd>
                      </dl>
                      <dl>
                        <dt>승률</dt>
                        <dd>
                          <span class="text-red">67승</span>/<span
                            class="text-aqua"
                            >33패(67%)</span
                          >
                        </dd>
                      </dl>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="sidebar_tit">
            <img src="./images/game/user_pick.png" alt="" />
          </div>
        </div>
        <!-- game box -->
        <div class="game_box">
          <div class="game">
            <div id="wrapper">
              <div id="spin" class="mSpinBtn">
                <div id="inner-spin"></div>
              </div>
              <span class="arrow"
                ><img src="./images/game/game_arrow.png" alt=""
              /></span>
              <div id="wheel" class="mWheelContainer">
                <div id="inner-wheel" class="wheel mWheelOutter">
                  <div class="sec">
                    <span class="fa">
                      <span class="icons icons_purple"></span>
                    </span>
                  </div>
                  <div class="sec">
                    <span class="fa">
                      <span class="icons icons_blue"></span>
                    </span>
                  </div>
                  <div class="sec">
                    <span class="fa">
                      <span class="icons icons_green"></span>
                    </span>
                  </div>
                  <div class="sec">
                    <span class="fa">
                      <span class="icons icons_blue"></span>
                    </span>
                  </div>
                  <div class="sec">
                    <span class="fa">
                      <span class="icons icons_purple"></span>
                    </span>
                  </div>
                  <div class="sec">
                    <span class="fa">
                      <span class="icons icons_green"></span>
                    </span>
                  </div>
                  <div class="sec">
                    <span class="fa">
                      <span class="icons icons_purple"></span>
                    </span>
                  </div>
                  <div class="sec">
                    <span class="fa">
                      <span class="icons icons_blue"></span>
                    </span>
                  </div>
                  <div class="sec">
                    <span class="fa">
                      <span class="icons icons_green"></span>
                    </span>
                  </div>
                  <div class="sec">
                    <span class="fa">
                      <span class="icons icons_blue"></span>
                    </span>
                  </div>
                  <div class="sec">
                    <span class="fa">
                      <span class="icons icons_purple"></span>
                    </span>
                  </div>
                  <!-- active item -->
                  <div class="sec">
                    <span class="fa">
                      <span class="icons icons_green active"></span>
                    </span>
                  </div>
                </div>

                <div id="inner-wheel" class="wheel_two mWheelInner">
                  <div class="sec">
                    <span class="fa">
                      <span class="icons icons_red"></span>
                    </span>
                  </div>
                  <div class="sec">
                    <span class="fa">
                      <span class="icons icons_orange"></span>
                    </span>
                  </div>
                  <div class="sec">
                    <span class="fa">
                      <span class="icons icons_red"></span>
                    </span>
                  </div>
                  <div class="sec">
                    <span class="fa">
                      <span class="icons icons_orange"></span>
                    </span>
                  </div>
                  <div class="sec">
                    <span class="fa">
                      <span class="icons icons_red"></span>
                    </span>
                  </div>
                  <div class="sec">
                    <span class="fa">
                      <span class="icons icons_orange"></span>
                    </span>
                  </div>
                  <div class="sec">
                    <span class="fa">
                      <span class="icons icons_red"></span>
                    </span>
                  </div>
                  <!-- add class on active -->
                  <div class="sec">
                    <span class="fa">
                      <span class="icons icons_orange"></span>
                    </span>
                  </div>
                </div>
                <div class="count">
                  <strong class="count_time">01:00</strong>
                  <div class="count_round">
                    <span class="r_number">999</span>회차
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- sidebar right -->
        <div class="sidebar right">
          <div class="sidebar_contents">
            <div class="result">
              <div class="result_list">
                <div class="result_list_item">
                  <div class="round_number">958회</div>
                  <div class="round_data">
                    <span class="c_icon green"></span>
                    <span class="c_icon purple"></span>
                  </div>
                </div>
                <div class="result_list_item">
                  <div class="round_number">958회</div>
                  <div class="round_data">
                    <span class="c_icon orange"></span>
                    <span class="c_icon red"></span>
                  </div>
                </div>
                <div class="result_list_item">
                  <div class="round_number">958회</div>
                  <div class="round_data">
                    <span class="c_icon blue"></span>
                    <span class="c_icon red"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="sidebar_tit">
            <img src="./images/game/game_result.png" alt="" />
          </div>
        </div>
      </div>
      <!-- 보석스핀 나의 게임픽 -->
      <div class="pop_layout ranking">
        <span class="close"><img src="./images/icon/close.png" alt="" /></span>
        <div class="pop">
          <div class="pop_head">
            <strong>보석스핀 나의 게임픽</strong>
          </div>
          <div class="pop_body">
            <div class="p_ranking">
              <div class="p_ranking_head">
                <div class="name">
                  <span class="icon"
                    ><img src="./images/level/1_11.png" alt=""
                  /></span>
                  <h3>홍길동</h3>
                </div>
                <div class="data">
                  <font class="text-red">67승</font>/<font class="text-blue"
                    >33패</font
                  >(67%)
                </div>
                <div class="data text-red"><span>▲</span>14연승</div>
              </div>
              <div class="p_ranking_list">
                <div class="p_ranking_list_item">
                  <div class="layout text-white">2023.06.08 - 150</div>
                  <div class="layout">
                    <span class="icons icons_blue"></span>
                    <span class="icons icons_green"></span>
                    <!-- <span class="icons icons_purple"></span> -->
                  </div>
                  <div class="layout beige">미적</div>
                  <div class="layout beige">
                    <span class="icon">▼</span>2연패
                  </div>
                </div>
                <div class="p_ranking_list_item">
                  <div class="layout text-white">2023.06.08 - 150</div>
                  <div class="layout">
                    <span class="icons icons_blue"></span>
                    <span class="icons icons_orange"></span>
                    <!-- <span class="icons icons_red"></span> -->
                  </div>
                  <div class="layout text-red">미적</div>
                  <div class="layout text-red">
                    <span class="icon">▲</span>2연승
                  </div>
                </div>
                <div class="p_ranking_list_item">
                  <div class="layout text-white">2023.06.08 - 150</div>
                  <div class="layout">
                    <span class="icons icons_blue"></span>
                    <span class="icons icons_orange"></span>
                    <!-- <span class="icons icons_red"></span> -->
                  </div>
                  <div class="layout text-red">미적</div>
                  <div class="layout text-red">
                    <span class="icon">▲</span>2연승
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 보석스핀 게임픽 랭킹 -->
      <div class="pop_layout p_ranking">
        <span class="close"><img src="./images/icon/close.png" alt="" /></span>
        <div class="pop">
          <div class="pop_head">
            <strong>보석스핀 게임픽 랭킹</strong>
          </div>
          <div class="pop_body">
            <div class="p_ranking">
              <div class="p_ranking_list_two">
                <div class="p_ranking_list_two_item">
                  <div class="layout">No.1</div>
                  <div class="layout">
                    <div class="name">
                      <span class="icon"
                        ><img src="./images/level/1_12.png" alt=""
                      /></span>
                      <h3>홍길동</h3>
                    </div>
                  </div>
                  <div class="layout">
                    <div class="info text-red">
                      <span class="icon">▲</span>14연승
                    </div>
                  </div>
                  <div class="layout">
                    <div class="info">
                      <font class="text-red">67승</font>/<font class="text-blue"
                        >33패</font
                      >(67%)
                    </div>
                  </div>
                  <div class="layout">
                    <button type="button">
                      <img src="./images/icon/icon_com_off.png" alt="" />
                    </button>
                  </div>
                </div>
                <div class="p_ranking_list_two_item">
                  <div class="layout">No.1</div>
                  <div class="layout">
                    <div class="name">
                      <span class="icon"
                        ><img src="./images/level/1_12.png" alt=""
                      /></span>
                      <h3>홍길동</h3>
                    </div>
                  </div>
                  <div class="layout">
                    <div class="info text-red">
                      <span class="icon">▲</span>14연승
                    </div>
                  </div>
                  <div class="layout">
                    <div class="info">
                      <font class="text-red">67승</font>/<font class="text-blue"
                        >33패</font
                      >(67%)
                    </div>
                  </div>
                  <div class="layout">
                    <button type="button">
                      <img src="./images/icon/icon_com_off.png" alt="" />
                    </button>
                  </div>
                </div>
                <div class="p_ranking_list_two_item">
                  <div class="layout">No.1</div>
                  <div class="layout">
                    <div class="name">
                      <span class="icon"
                        ><img src="./images/level/1_12.png" alt=""
                      /></span>
                      <h3>홍길동</h3>
                    </div>
                  </div>
                  <div class="layout">
                    <div class="info text-red">
                      <span class="icon">▲</span>14연승
                    </div>
                  </div>
                  <div class="layout">
                    <div class="info">
                      <font class="text-red">67승</font>/<font class="text-blue"
                        >33패</font
                      >(67%)
                    </div>
                  </div>
                  <div class="layout">
                    <button type="button">
                      <img src="./images/icon/icon_com_off.png" alt="" />
                    </button>
                  </div>
                </div>
                <div class="p_ranking_list_two_item">
                  <div class="layout">No.1</div>
                  <div class="layout">
                    <div class="name">
                      <span class="icon"
                        ><img src="./images/level/1_12.png" alt=""
                      /></span>
                      <h3>홍길동</h3>
                    </div>
                  </div>
                  <div class="layout">
                    <div class="info text-red">
                      <span class="icon">▲</span>14연승
                    </div>
                  </div>
                  <div class="layout">
                    <div class="info">
                      <font class="text-red">67승</font>/<font class="text-blue"
                        >33패</font
                      >(67%)
                    </div>
                  </div>
                  <div class="layout">
                    <button type="button">
                      <img src="./images/icon/icon_com_off.png" alt="" />
                    </button>
                  </div>
                </div>
                <div class="p_ranking_list_two_item">
                  <div class="layout">No.1</div>
                  <div class="layout">
                    <div class="name">
                      <span class="icon"
                        ><img src="./images/level/1_12.png" alt=""
                      /></span>
                      <h3>홍길동</h3>
                    </div>
                  </div>
                  <div class="layout">
                    <div class="info text-red">
                      <span class="icon">▲</span>14연승
                    </div>
                  </div>
                  <div class="layout">
                    <div class="info">
                      <font class="text-red">67승</font>/<font class="text-blue"
                        >33패</font
                      >(67%)
                    </div>
                  </div>
                  <div class="layout">
                    <button type="button">
                      <img src="./images/icon/icon_com_off.png" alt="" />
                    </button>
                  </div>
                </div>
                <div class="p_ranking_list_two_item">
                  <div class="layout">No.1</div>
                  <div class="layout">
                    <div class="name">
                      <span class="icon"
                        ><img src="./images/level/1_12.png" alt=""
                      /></span>
                      <h3>홍길동</h3>
                    </div>
                  </div>
                  <div class="layout">
                    <div class="info text-red">
                      <span class="icon">▲</span>14연승
                    </div>
                  </div>
                  <div class="layout">
                    <div class="info">
                      <font class="text-red">67승</font>/<font class="text-blue"
                        >33패</font
                      >(67%)
                    </div>
                  </div>
                  <div class="layout">
                    <button type="button">
                      <img src="./images/icon/icon_com_off.png" alt="" />
                    </button>
                  </div>
                </div>
                <div class="p_ranking_list_two_item">
                  <div class="layout">No.1</div>
                  <div class="layout">
                    <div class="name">
                      <span class="icon"
                        ><img src="./images/level/1_12.png" alt=""
                      /></span>
                      <h3>홍길동</h3>
                    </div>
                  </div>
                  <div class="layout">
                    <div class="info text-red">
                      <span class="icon">▲</span>14연승
                    </div>
                  </div>
                  <div class="layout">
                    <div class="info">
                      <font class="text-red">67승</font>/<font class="text-blue"
                        >33패</font
                      >(67%)
                    </div>
                  </div>
                  <div class="layout">
                    <button type="button">
                      <img src="./images/icon/icon_com_off.png" alt="" />
                    </button>
                  </div>
                </div>
                <div class="p_ranking_list_two_item">
                  <div class="layout">No.1</div>
                  <div class="layout">
                    <div class="name">
                      <span class="icon"
                        ><img src="./images/level/1_12.png" alt=""
                      /></span>
                      <h3>홍길동</h3>
                    </div>
                  </div>
                  <div class="layout">
                    <div class="info text-red">
                      <span class="icon">▲</span>14연승
                    </div>
                  </div>
                  <div class="layout">
                    <div class="info">
                      <font class="text-red">67승</font>/<font class="text-blue"
                        >33패</font
                      >(67%)
                    </div>
                  </div>
                  <div class="layout">
                    <button type="button">
                      <img src="./images/icon/icon_com_off.png" alt="" />
                    </button>
                  </div>
                </div>
                <div class="p_ranking_list_two_item">
                  <div class="layout">No.1</div>
                  <div class="layout">
                    <div class="name">
                      <span class="icon"
                        ><img src="./images/level/1_12.png" alt=""
                      /></span>
                      <h3>홍길동</h3>
                    </div>
                  </div>
                  <div class="layout">
                    <div class="info text-red">
                      <span class="icon">▲</span>14연승
                    </div>
                  </div>
                  <div class="layout">
                    <div class="info">
                      <font class="text-red">67승</font>/<font class="text-blue"
                        >33패</font
                      >(67%)
                    </div>
                  </div>
                  <div class="layout">
                    <button type="button">
                      <img src="./images/icon/icon_com_off.png" alt="" />
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 게임설명 -->
      <div class="pop_layout exp_pop">
        <span class="close"><img src="./images/icon/close.png" alt="" /></span>
        <div class="pop">
          <div class="pop_head">
            <strong>게임설명</strong>
          </div>
          <div class="pop_body">
            <div class="textBox">
              <p>보석스핀(1분) 데이터 및 제공시간 안내</p>
              <p>
                보석스핀(1분)은 24시간 1분에 한번씩 게임이 실행되며 1일 총
                1440회차가 진행 됩니다.
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- 공유하기 -->
      <div class="pop_layout share_pop">
        <span class="close"><img src="./images/icon/close.png" alt="" /></span>
        <div class="pop">
          <div class="pop_head">
            <strong>중계화면 퍼가기</strong>
          </div>
          <div class="pop_body">
            <strong>HTML코드</strong>
            <div class="textarea">
              <textarea name="" id="">
<iframe src="http://named.com/games/ladder/view.php" width="900" height="553" scrolling="no" frameborder="0"></iframe></textarea
              >
              <button type="button">코드복사</button>
            </div>
            <p class="mar-t-15">
              위의 HTML의 코드를 복사하여 원하시는 페이지에 아이프레임으로
              추가하시면 해당게임 중계화면으로 이용 가능합니다.퍼간 중계화면에는
              베픽 랭킹 및 픽스터 픽 등 베픽관련 데이터가 노출되지 않습니다.
            </p>
          </div>
        </div>
      </div>

      <!-- bg light -->
      <div class="bg_light">
        <span class="light one"></span>
        <span class="light two"></span>
        <span class="light three"></span>
        <span class="light four"></span>
        <span class="light five"></span>
        <span class="light six"></span>
        <span class="light seven"></span>
        <span class="light eight"></span>
        <span class="light nine"></span>
        <span class="light ten"></span>
        <span class="light eleven"></span>
        <span class="light twelve"></span>
      </div>
    </div>
    <script type="module" src="./js/m-routtle.js"></script>
  </body>
</html>
